<template>
    <el-form :model="form" ref="formRef" label-width="100px" v-loading="formLoading">
        <el-form-item label="属性名" prop="name">
            <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="属性类型" prop="searchType">
            <el-select v-model="form.searchType" placeholder="请选择">
                <el-option label="规格参数" :value="1"></el-option>
                <el-option label="销售属性" :value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="值类型" prop="valueType">
            <el-switch v-model="form.valueType" active-text="单选" inactive-text="多选" :inactive-value="0"
                :active-value="1"></el-switch>
        </el-form-item>
        <el-form-item label="可选值" prop="valueSelect">
            <el-input-tag v-model="form.valueSelect" clearable />
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryName">
            <el-cascader style="width: 300px;" v-model="form.categoryArray" :options="options" :props="cascaderProps" />
        </el-form-item>
        <el-form-item label="所属分组" prop="groupId" v-if="type == 1">
            <el-select v-model="form.groupId" placeholder="请选择">
                <el-option v-for="item in attrGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="可检索" prop="searchType" v-if="type == 1">
            <el-switch v-model="form.searchType" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="快速展示" prop="showDesc" v-if="type == 1">
            <el-switch v-model="form.showDesc" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="启用状态" prop="enable">
            <el-switch v-model="form.enable" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="PmsAttrAddOrEdit">
import { ref, reactive, onMounted } from 'vue';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus';

import { API as ATTR_API } from '@/api/mall/pmsAttr';
import { API as GROUP_API } from '@/api/mall/pmsAttrGroup';
import type { pmsAttrType } from '@/api/mall/pmsAttr/types';
import { commonGetById, commonCreateOrEdit, commonListQuery } from '@/api/common/CommonAPI';
import type { pmsCategoryType } from '@/api/mall/pmsCategory/types';
import type { pmsAttrGroupType } from '@/api/mall/pmsAttrGroup/types';
import { pmsCategoryListTree } from '@/api/mall/pmsCategory';

const props = defineProps(['isEdit', 'id', 'type'])
const emit = defineEmits(['success'])

// 确认按钮的loading
const loading = ref(false)
// 加载页面的loading
const formLoading = ref(false)
// 表单回显值
let form = reactive<pmsAttrType>({})
// 用于表单校验
const formRef = ref<FormInstance>()

onMounted(() => {
    load()
})

const load = async () => {
    try {
        formLoading.value = true
        if (props.isEdit) {
            // 获取属性
            const data = await commonGetById<pmsAttrType>(ATTR_API.GET_BY_ID, props.id)
            Object.assign(form, data.data)
        }
        await categoryList();
        await groupList();
    } finally {
        formLoading.value = false
    }
}

const submit = async () => {
    await formRef.value?.validate()
    try {
        loading.value = true
        const data = await commonCreateOrEdit(ATTR_API.CREATE_OR_EDIT, form)
        if (data.code === 200) {
            ElMessage.success(props.isEdit ? '修改成功' : '添加成功')
            emit('success')
        }
    } finally {
        loading.value = false
    }
}
//------所属分类
const options = ref<pmsCategoryType[]>()
const cascaderProps = {
    children: 'children',
    label: 'name',
    value: 'catId'
}
// 所有的分类
const categoryList = async () => {
    const data = await pmsCategoryListTree()
    options.value = data.data
}

//------所属组
const attrGroupList = ref<pmsAttrGroupType[]>()
// 只查询上面的三级分类的组 TODO
const groupList = async () => {
    const data = await commonListQuery<pmsAttrGroupType>(GROUP_API.LIST)
    attrGroupList.value = data.data
}
</script>

<style scoped lang="scss"></style>